<template>
  <div>
    <div class="mv-top">
      <svg class="icon" aria-hidden="true" @click="$router.go(-1)">
        <use xlink:href="#icon-zuojiantou"></use>
      </svg>
    </div>
    <video :src="mvData.url" class="video" controls loop autoplay></video>
    <div class="mvDetail">
      <div class="mvDetail-user">
        <div class="left">
          <img :src="mvDetail.cover" alt="" />
          <div class="leftMv">
            <div class="user">{{ mvDetail.artistName }}</div>
            <div class="mvNumber">{{ changCount(mvDetail.playCount) }}</div>
          </div>
        </div>
        <div class="rightMv">
          <span>关注</span>
        </div>
      </div>
      <div class="mvDesc">
        <div class="name">
          <div class="left">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-MV"></use>
            </svg>
            《{{ mvDetail.name }}》
          </div>
          <svg class="icon" aria-hidden="true" @click="isShow">
            <use xlink:href="#icon-xialaanniu"></use>
          </svg>
        </div>
        <div v-show="Show" class="mvContent">{{ mvDetail.desc }}</div>
      </div>
    </div>
    <RelatedMV></RelatedMV>
  </div>
</template>

<script>
import { getMusicMv, getMvdetail } from "@/request/api/mv";
import RelatedMV from "../Item/RelatedMV.vue";
export default {
  data() {
    return {
      mvData: [],
      mvDetail: [],
      Show: true,
    };
  },
  components: {
    RelatedMV,
  },
  mounted() {
    getMusicMv(this.$store.state.mvid).then((res) => {
      console.log("11", res);
      this.mvData = res.data.data;
    });
    getMvdetail(this.$store.state.mvid).then((res) => {
      this.mvDetail = res.data.data;
    });
  },
  methods: {
    isShow() {
      this.Show = !this.Show;
    },
    //播放数据的处理
    changCount(num) {
      if (num > 100000000) {
        return (num / 10000000).toFixed(1) + "亿";
      } else if (num > 10000) {
        return (num / 10000).toFixed(1) + "万";
      }
    },
  },
};
</script>
<style lang="less">
.mv-top {
  padding: 0.2rem;
  position: absolute;
  z-index: 999;
  .icon {
    fill: #fff;
  }
  margin-top: -4.2rem;
}
.video {
  width: 100%;
  position: fixed;
  z-index: 2;
  margin-top: -4.2rem;
}
.mvDetail {
  border-bottom: 0.02rem solid black;
  margin-top: 4.2rem;
  .mvDetail-user {
    display: flex;
    justify-content: space-between;
    padding: 0.2rem;
    .left {
      display: flex;
      img {
        width: 1rem;
        height: 1rem;
        border-radius: 100%;
      }
      .leftMv {
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        .user {
          padding: 0 10px;
          font-weight: 700;
        }
        .mvNumber {
          padding: 8px;
        }
      }
    }
    .rightMv {
      border: 1px solid red;
      padding: 0.1rem;
      height: 0.6rem;
      border-radius: 0.8rem;
      font-weight: 700;
      margin-top: 0.2rem;
    }
  }
  .mvDesc {
    .name {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 700;
      margin: 5px 0.4rem;
      font-size: 0.35rem;
      .left {
        display: flex;
        align-items: center;
        width: 100%;
      }
    }
    .mvContent {
      padding: 0.2rem;
      line-height: 0.4rem;
    }
  }
}
</style>
